vue input输入框长度限制
今天在开发登录页时，需要设置登录输入框的长度，输入类型为number<input type="number" maxlength="11" placeholder="请输入手机号"> 发现在这样写时，输入长度限制并没有生效，经过测试发现在type为number或者text时，设置maxlength参数并不会生效。<input type="number" oninput="if(value.length > 11)value = value.slice(0, 11)" place...
2024-01-10
vue.js - 修改eslint
当我们使用vue开发项目时，发现经常报一些莫名的错误，什么空格没写、什么双引号要改为单引号，这对于有强迫症的同学来说，真是有句mmp不知当讲不当讲。因为vue版本的不同，所以不同版本的去掉eslint的方式也不同。因为网上没看到我这个版本的去除方法。所以我斗胆上传我这个版本的方法1:首...
2024-01-10
vue 销毁eventBus
eventBus 适用于不同页面传递值，当然也可以用vuex， 本篇讲解的是如何使用吃，并销毁eventBus我在A页面中发布1 mounted(){2 eventBus.$on("clickLeft",(id)=>{3 this.groupId = id;4 this.getTableData()5 })6 },在B页面中触发1 clickItems(id){2 this.activeId = ...
2024-01-10
vue 中使用print.js导出pdf操作
1.print.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") { this.dom = do...
2024-01-10
vue el-input数据处理问题？
要求el-input输入的值是数字数组形式：[123,123]，组件定义的value是string类型，所以在查询的时候需要对input输入的值进行转换。我的处理方式： // 处理表单所有元素数据 // 处理表单所有元素数据 handleAllFormItem () { // 处理空数据 let newForm = {} let objs = {...
2024-02-19
vue 实现input框的宽度自适应？
vue 如何实现input框的宽度自适应？回答：不知道你说的自适应宽度具体指的是什么根据父元素宽度自动适应宽度，那这个CSS就行，与Vue无关，方案有多种，flex的示例如下：.container { display: flex; flex-direction: row;}.container input { flex: 1;}根据输入内容自适应宽度，那么就需要借助JS来实现...
2024-02-27
新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目（详细文章请戳用Vue创建一个新的项目）。该项目如果需要组件等都需要自己去写，今天就学习一下如何新建一个基于vue.js+Mint UI的项目，直接使用比较热门的一个基于 Vue.js 的移动端组件库，那就是MintUI。使用 vue-cli首先需要使用vue-cli，因为上一篇文...
2024-01-10
【Vue】vue.js的keep-alive include无效
我的项目只要是写了keep-alive标签，无论你exclude里面写了什么，它都会全部页面都缓存。<keep-alive exclude="xxx,yyy"><router-view></router-view></keep-alive>求解啊？回答name，是name属性！！！注意一定要给需要缓存的组件都写name属性的值。我一开始还以为是路由的name值，后来发现搞错了 = =exclude 完全没问题, 几...
2024-01-10
vue.min.js如何本地引入（import）
问题描述我想要将vue本地化，现在的思路是在js文件中引入vue.min.js，但是vue.min.js本身不是用export输出的，官网上也是在html中引入，请问该如何改造vue.min.js才能使用import引入回答人家不是提供了基于 ES6 模块化的输出版本了？Vue 源码前面一段适配环境的，根据你的前端环境来判断(function (global, factory) ...
2024-01-10
vue.js watch经常失效的场景与解决方案
使用过watch的，应该起码经历过一次失效。比如，我们监听对象的时候，在没有踩坑之前，很容易这样写：但是，❌，这里的watch是无效的!!!因为 obj 是引用类型！！！引用类型的指针是固定的，所以如果不是重新赋值，那么其赋值的变量自然也不会发生变化。举个例子：let obj = { a: 1 };let obj1 = ob...
2024-01-10vue main.js中引入组件库样式？
我测试组件库的封装，通过下面方式可以正确引入样式import aa from 'package name'import '../node_modules/package name/dist/index.css'app.use(aa)下面这样就报错找不到样式import aa from 'package name'import 'package name/dist/index.css'app...
2024-02-13
vue 引入第一个elementui组件
导入报错：可能会报错：解决办法：eslint： 修改成false 就可以了其次修改man,js引入组件elmentui：App.vue组件template<template> <el-table :data="tableData" style="width: 100%"> <el-table-column label="日期" width="180"> <template slot-scope="scope"> <i class="el-ico...
2024-01-10
浅谈下vue的 $mount()
Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。具体见代码：顺便附上vue渲染机制流程图：...
2024-01-10Vue.js中关于EventBus的抽像？
场景:父组件:<div v-for="(item,index) in corpKideList" :id="item.names" :key="index" :ref="item.names"> <component :is="item.key" :ref="item.key" :type="item.key" :apply-...
2024-02-12
vue-ssr之nuxt.js 服务端的异步数据交互
在web项目开发中，数据请求是必不可少的；我们通常在vue中使用的数据请求，都是基于浏览器进行的异步请求；那么在nuxt.js框架中,如何实现数据请求呢？现在用一个例子来演示怎么使用axios，实现服务端的异步数据请求。PS. axios在nuxt.js框架是作为模块在初始化项目的时候就让选择安装的。但是亲测...
2024-01-10
vue中页面input输入的内容是一个js函数或表达式，如何让其生效？
有一个需求，需要给不同的类目赋值动态的调用接口并处理它的返回值。比如说有个类目叫三年2班的所有学生，我需要给它绑定一个接口地址，接口调用方式，接口入参以及返回值的处理逻辑，并且把它存进数据库，下次用的时候直接调用，页面上是这样的：正常情况下，的处理是request(地址，get，入参）.then(res=>{ return res.data})但是由于需要页面传值，导致接口返值定义这里...
2024-03-13Vue.js实现一个自定义分页组件vue-paginaiton
vue实现一个分页组件vue-paginaitonvue使用了一段时间的感触就是，我再也不想直接操作DOM了。数据绑定式的编程体验真是好。实现的一个分页组件。这里的css就不放出来了，可以看直接去github上下载：vue-pagination先上一张实例图吧模版<div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on：click="cur--">上一页...
2024-01-10js实现input密码框显示/隐藏功能
JavaScript实现input密码框显示/隐藏的功能，供大家参考，具体内容如下实现代码：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display: flex; align-items: center; } .password .fa{ positio...
2024-01-10
CountUp.js 轻量级数字滚动动画特效插件
CountUp.js 是一种无依赖项的轻量级 JavaScript 类，可用于快速创建以更有趣的方式显示数字数据的动画。尽管它的名字，CountUp 可以在两个方向上进行计数，具体取决于您传递的开始和结束值。CountUp.js 支持所有主流浏览器。基于 MIT 许可证发布。特征高度可定制：的选项范围很广，您甚至可以替换数字...
2024-01-10
vue-wacth监听事件 - MiniDuck
vue-wacth监听事件 2019-08-05 0:20Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。以下实例通过使用 watch 实现计数器：（此时我就想了一下，好像绑定点击事件，也是可以实现计数器的，所以，我就自己增加了一个点击事件“我真牛”）<!DOCTYPE html><html> <head> <meta charset=...
2024-01-10关于vue.js v-bind 的一些理解和思考
一、v-bind 初探它是一个 vue 指令，用于绑定 html 属性，如下：<div id="app"> <p v-bind:title="title">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p></div>......var vm = new Vue({ el: '#app', data: { title: 'title content' }});这里的 html 最后会渲染成：<div id="app"> <p title="title content">h...
2024-01-10
ESLint 是如何检查 .vue 文件的
近期要做一个类似的内容，学习了一下 Vue 是如何做的。ESLint 中的扩展机制首先需要了解一下如何才能扩展 ESLint 的功能。ESLint 扩展机制主要有 Rules、Plugins、Formatters、Parsers，Formatters 目前不需要用到，因此着重看一下其他三种方式。Parser用于自定义的解析文件内容，返回 AST 给后续步骤使用。Rules...
2024-01-10
vue 多层对象嵌套 导致this指向错误
option1 和 echartData 定义在data中如下图 option1 子属性 series.data 想引用 echartData但是这个时候的 this 不是指向 vue 实例的问题：怎么正确的获取到 this.echartData回答可以吧option1定义为计算属性这种情景不适用this，可以把echartData提取出来单独定义，就能实现多处引用了data() { const echartData = {}; return ...
2024-01-10快速解决vue.js 模板和jinja 模板冲突的问题
jinjia和vue.js默认的模板转义符都是{{}}目前的解决办法是修改vue.js的转义符,将原来的{{}}替换为其他标签,我改为{[]}版本1.x和2.x方法如下// 1.xVue.config.delimiters = ['{[', ']}'] // 2.xnew Vue({ delimiters: ['{[', ']}']})以上这篇快速解决vue.js 模板和jinja 模板冲突的问题就是小编分享给大家的全部内容了，希望能...
2024-01-10Vue 页面切换效果之 BubbleTransition(推荐)
CodePen 地址前端使用 SPA 之后，能获得更多的控制权，比如页面切换动画，使用后端页面我们可能做不了上面的效果，或者做出来会出现明显的闪屏。因为所有资源都需要重新加载。今天使用 vue，vue-router，animejs 来讲解如何上面的效果是如何实现的。步骤点击菜单，生成 Bubble，开始执行入场动画...
2024-01-10
